<template>
  <div class="login">
    <div class="loginBox">
      <p class="title">用户注册</p>
      <mu-container>
        <mu-form ref="form" :model="validateForm" class="mu-demo-form">
          <mu-form-item prop="phone" :rules="phoneRules">
            <mu-text-field v-model="validateForm.phone" prop="phone" placeholder="请输入手机号"></mu-text-field>
            <div class="sendMsg">
                <span v-if=!show @click.stop="getCode">获取验证码</span>
                <span v-else>{{count}}s后重新发送</span>
            </div>
          </mu-form-item>
          <mu-form-item prop="phone" :rules="codeRules">
            <mu-text-field v-model="validateForm.code" prop="code" placeholder="短信验证码"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="phone" :rules="inviteCodeRules">
            <mu-text-field v-model="validateForm.invitation_code"  prop="invitation_code" placeholder="邀请码"></mu-text-field>
          </mu-form-item>
        </mu-form>
        <p class="regeister-tips">*请联系组织提取邀请码</p>
      </mu-container>

      <div class="sign">
        <div></div>

        <img v-if="this.validateForm.phone == ''" src="@as/img/xiayibu_moren@2x.png">

        <img
          v-if="this.validateForm.phone != ''"
          src="@as/img/xiayibu@2x.png"
          alt
          @click="submit()"
        >
      </div>
    </div>
  </div>
</template>

<script>
 const TIME_COUNT = 60;
export default {
  data() {
    return {
        show:false,
        time:null,
        count:60,
        visibility: false,
        sendAgin:true,
        phoneRules: [
        { validate: val => !!val, message: "必须填写手机号" },
        {
          validate: val => /^1[34578]\d{9}$/.test(val),
          message: "手机号格式不正确"
        }
      ],
        inviteCodeRules:[
            { validate: val => !!val, message: "请联系组织索取邀请码" },
        ],
        codeRules:[
            {
                validate: val => !!val, message: "必须填写验证码"
            }
        ],
      //   argeeRules: [{ validate: val => !!val, message: "必须同意用户协议" }],
      validateForm: {
        phone: ""
      }
    };
  },
  mounted() {
     this.$progress.done();
  },
  methods: {
      // validateCode(){
      //     if(this.validateForm.phone
      //         &&(/^1[3456789]\d{9}$/.test(this.validateForm.phone))
      //         &&this.validateForm.code
      //         &&this.validateForm.code.length==6
      //     ){
      //         this.$http
      //             .post("/index/index/checkMsg", {
      //                 phone: this.$route.query.phone,
      //                 code: this.code
      //             }).then((res)=>{
      //                 this.$toast.success(res.msg);
      //             })
      //     }
      // },
    getCode(){
        if((/^1[3456789]\d{9}$/.test(this.validateForm.phone))){
            this.$http.post("/index/index/sendMsg", {
                phone: this.validateForm.phone,
                org_id: "11"
            });
            this.get();
            this.$progress.done();
        }
    },
      get() {
          this.show = true;
          this.count = TIME_COUNT;
          this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
              } else {
                  this.show = false;
                  clearInterval(this.timer);
                  this.timer = null;
              }
          }, 1000);
      },
    submit() {
        this.$refs.form.validate().then((result) => {
            if(result){
                if(this.validateForm.phone
                    &&(/^1[3456789]\d{9}$/.test(this.validateForm.phone))
                    &&this.validateForm.code
                    &&this.validateForm.code.length==6
                ){
                    this.$http
                        .post("/index/index/checkMsg", {
                            phone: this.validateForm.phone,
                            code: this.validateForm.code
                        }).then((res)=>{
                        console.log(res)
                        if(res.code==200){
                            // this.$refs.form.validate().then(vaild => {
                            //     if (vaild) {
                            this.$http.post('/index/registered/invitation_code',{
                                phone:this.validateForm.phone,
                                invitation_code:this.validateForm.invitation_code
                            }).then((res)=>{
                                // alert(123)
                                console.log(res)
                                if(res.code=='200'){
                                    this.$router.push({
                                        path: "/information",
                                        query: {
                                            phone: this.validateForm.phone,
                                            type: "1",
                                            org_id:res.data.org_id
                                        }
                                    });
                                }else if(res.code=='44000'){
                                    this.$router.push({
                                        path: "/repeat",
                                        query: {
                                            phone: this.validateForm.phone,
                                            name: res.data.name,
                                            org_id:res.data.org_id
                                        }
                                    });
                                }else{
                                    console.log(res.code)
                                    this.$toast.error(res.msg);
                                }
                            })
                            // }
                            // });
                        }else{
                            this.$toast.error(res.msg);
                        }
                    })
                }else{
                    this.$toast.error('请联系组织提取邀请码');
                }
            }
        });
      // this.$refs.form.validate().then(vaild => {
      //   if (vaild) {
      //     this.$router.push({
      //       path: "/verify",
      //       query: { phone: this.validateForm.phone }
      //     });
      //   }
      // });
    }
  }
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  display: flex;
  justify-content: center;
  // border:1px solid #000
}

.title {
  font-size: 36px;
  margin-top:50px;
  margin-bottom: 60px;
  font-weight: Medium;

}
.regeister-tips{
  font-size:14px;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:#666;
  line-height:20px;

}
.mu-form /deep/ {
  .mu-form-item{
    .mu-form-item-content{
      position: relative;
      span{
        position: absolute;
        right: 5px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size:12px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(244,117,72,1);
      }
    }
  }
}
.loginBox {
  width: 80%;
  //  border:1px solid #000
}
.mu-demo-form {
  width: 100%;
  max-width: 460px;
  //  border:1px solid #000
}

.solid {
  border-left: 1px solid #eee !important;
  height: 15px;
  width: 0px;
  margin: 10px;
}

.sign {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;

  div {
    width: 125px;
    border: 1px solid rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
  }
  p {
    font-size: 12.5px;
    color: #f47548;
  }

  img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
  }
}
</style>